import defaultTheme from "@/styles/theme/theme-light.less";
import darkTheme from "@/styles/theme/theme-dark.less";
import { ThemeConfigProp } from "@/redux/interface";

/**
 * @description 全局主题设置
 * */

const useTheme = (themeConfig: ThemeConfigProp) => {
	const { isDark, weakOrGray } = themeConfig;
	const initTheme = () => {
		// 灰色和弱色切换
		const body = document.documentElement as HTMLElement;
		if (!weakOrGray) body.setAttribute("style", "");
		if (weakOrGray === "weak") body.setAttribute("style", "filter: invert(80%)");
		if (weakOrGray === "gray") body.setAttribute("style", "filter: grayscale(1)");
		// 切换暗黑模式
		let head = document.getElementsByTagName("head")[0];
		let styleDom = document.createElement("style");
		styleDom.dataset.type = "dark";
		styleDom.innerHTML = isDark ? darkTheme : defaultTheme;
		if (isDark) {
			document.documentElement.setAttribute("theme-mode", "dark");
		} else {
			document.documentElement.removeAttribute("theme-mode");
		}
		head.appendChild(styleDom);
	};
	initTheme();

	return {
		initTheme
	};
};

export default useTheme;
